<template>
  <div style="width: auto;height: 290px" id="echarts3">
  </div>
</template>
 
<script>
import echarts from 'echarts'
export default {
  name: 'echarts3',
  data () {
    return {
        option : {
        color: ['#faa755', '#ffc20e'],
        title: {
          text: '管道状态',
          left: 'center',
          textStyle: {
          color: '#FFA07A'
          }
        },
            tooltip: {
          trigger: 'item'
        },
      legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: '#f58220'
          }
        },
   radar: [
    {
      indicator: [
        { text: '压力' },
        { text: '流量' },
        { text: '流速' }
      ],
      center: ['50%', '70%'],
      radius: 140,
      startAngle: 90,
      splitNumber: 2,
      shape: 'triangle',
      splitArea: {
        areaStyle: {
          color: ['#faa755', '#f58220'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 2
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 194, 14, 0.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(250, 167, 85, 0.8)'
        }
      }
    }
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [100, 8, 0.4],
          name: '水管',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.3)'
          }
        },
        {
          value: [60, 5, 0.3],
          name: '暖气管',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.8)'
          }
        }
      ]
    }
  ]
}
    }
  },
  mounted () {
    this.echartsInit()
  },
  methods: {
    echartsInit () {
      // 在生命周期中挂载
      echarts.init(document.getElementById('echarts3')).setOption(this.option)
    }
  }
}
</script>
 
<style scoped>
 
</style>